<template>
  <div class="changeDetail">
    <van-nav-bar title="修改订单"
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
                 fixed>
      <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
      <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
    </van-nav-bar>
    <div class="detailInfo">
      <van-cell-group>
        <van-cell title="是否提货"
                  :is-link="!disabledtihuo"
                  :value="orderData.kaPickup==0?'否':'是'"
                  size="large"
                  @click="changePick" />

        <van-action-sheet v-model="showPick"
                          :round="false"
                          :actions="actionsPick"
                          @select="onSelectPick"
                          cancel-text="取消"
                          @cancel="onCancelPick" />
        <van-field label="提货费"
                   v-model="orderData.kaArPickUp"
                   :disabled="disabledtihuoprice"
                   v-show="orderData.kaPickup!=0"
                   type="number"
                   size="large"
                   placeholder="请输入"
                   input-align="right" />

        <van-cell title="是否送货"
                  :is-link="iskaDelivery"
                  :value="orderData.kaDelivery==0?'否':'是'"
                  size="large"
                  @click="changeGive" />

        <van-action-sheet v-model="showGive"
                          :round="false"
                          :actions="actionsGive"
                          @select="onSelectGive"
                          cancel-text="取消"
                          @cancel="onCancelGive" />
        <van-field label="送货费"
                   v-model="orderData.kaArSend"
                   :disabled="disabledtihuoprice"
                   v-show="orderData.kaDelivery!=0"
                   type="number"
                   size="large"
                   placeholder="请输入"
                   input-align="right" />
        <van-field label="干线运输应收"
                   v-model="orderData.kaArFreight"
                   required
                   :disabled="disabledganxianprice"
                   size="large"
                   placeholder="请输入"
                   input-align="right" />
        <van-field class="assure"
                   v-model="orderData.kaGoodValues"
                   type="digit"
                   size="large"
                   placeholder="请输入"
                   input-align="right">
          <template slot="label">
            <span class="custom-title">货物保价</span>
            <span class="custom-assure">（保费应收￥{{orderData.kaInsuredPrice}}）</span>
          </template>
        </van-field>

        <van-cell title="使用优惠券"
                  :is-link="!couponShow"
                  :value="setPageLottery"
                  size="large"
                  @click="changeCoupon" />
        <van-action-sheet v-model="showCoupon"
                          :actions="lotteryList"
                          @select="onSelectCoupon"
                          cancel-text="取消"
                          @cancel="onCancelCoupon" />
      </van-cell-group>
      <!-- <van-field v-model="orderData.modifyRemark"
                 required
                 rows="1"
                 autosize
                 label="修改备注"
                 type="textarea"
                 maxlength="50"
                 placeholder="请输入"
                 show-word-limit
                 input-align="right"
                 size="large" /> -->
      <!-- <van-field v-model="value" label="修改备注" size="large" rows="1" autosize type="textarea" maxlength="50" show-word-limit class='field' required/> -->
    </div>
    <div class="detailBtn">
      <div class="btn-wrap">
        <div class="btn-left"
             @click="handelCancel">
          <span>取消</span>
        </div>
        <div class="btn-right"
             @click="handelSure">
          <span>保存</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { orderSelect, orderChange } from '@/api/order';
import { lotterySelect } from '@/api/customer';

export default {
  data () {
    return {
      orderData: {
        // modifyRemark: ''
      },
      showGive: false,
      showPick: false,
      showCoupon: false,
      value: '',
      actionsPick: [
        { name: '否', index: 0 },
        { name: '是', index: 1 }
      ],
      actionsGive: [
        { name: '否', index: 0 },
        { name: '是', index: 1 }
      ],
      actionsCoupon: [
        { name: '满300减50' },
        { name: '满400减100' }
      ],
      lotteryList: []
    };
  },
  mounted () {
    this.orderId = this.$route.query.orderId;
    if (this.orderId) {
      this.getData();
    }
  },
  methods: {
    getData () {
      orderSelect(this.orderId).then(res => {

        this.orderData = res.data;
        // this.orderData.pushPlatform = this.orderData.pushPlatformPc;
        this.orderData.tiHuoPrice = this.orderData.kaArPickUp;
        this.orderData.faHuoPrice = this.orderData.kaArSend;
        this.orderData.ganXianPrice = this.orderData.kaArFreight;
        // if (!this.orderData.modifyRemark) {
        //   this.orderData.modifyRemark = '';
        // }
        this.getlottery(this.orderData.kaUserId);
      });
    },
    getlottery (userId) {
      lotterySelect(userId).then(res => {
          res.data.unshift({
            lotteryId:null,
            name:'45',
            data:'123',
            Coudescribe:'不使用任何优惠券'
          });

        this.lotteryList = res.data;
        if (this.lotteryList) {
          this.lotteryList.map(item => {
            item.name = item.Coudescribe;
          });
        }
      });
    },
    onClickLeft () {
      this.$router.back();
    },
    onClickRight () {

      let url = window.location.host;

      let index = url.indexOf('pre');

      if (index <= -1) {
        window.location.href = 'https://ka.lecarlink.com/index.aspx';
      } else {
        window.location.href = 'https://ka-pre.lecarlink.com/index.aspx';
      }

    },
    onSelectGive (item) {
      this.showGive = false;
      this.orderData.kaDelivery = item.index;
      if (this.orderData.kaDelivery == 0) {
        this.orderData.kaArSend = null;
      }
      console.log(item);
    },
    onCancelGive () {
      this.showGive = false;
    },
    changeGive () {
      if (this.iskaDelivery) {
        this.showGive = true;
      }
    },
    onSelectPick (item) {
      this.showPick = false;
      this.orderData.kaPickup = item.index;
      if (this.orderData.kaPickup == 0) {
        this.orderData.kaArPickUp = null;
      }
      console.log(item);
    },
    onCancelPick () {
      this.showPick = false;
    },
    changePick () {
      if (this.disabledtihuo) {
        return;
      }
      this.showPick = true;
    },
    changeCoupon () {
      if (this.couponShow) {
        return;
      }
      this.showCoupon = true;
    },
    onSelectCoupon (item) {
      this.showCoupon = false;
      this.orderData.lotteryId = item.LotteryID;
      this.orderData.lotteryMan = item.EnoughFee;
      this.orderData.lotteryJian = item.Recduce;
      console.log(item);
    },
    onCancelCoupon () {
      this.showCoupon = false;
    },
    handelCancel () {
      this.$router.back();
    },
    handelSure () {
      if (this.orderData.orderStatusBack >= 13) {
        this.$toast.fail('该订单状态不能修改费用信息');
        return;
      }
      if (this.orderData.modifyStatus == 1) {
        this.$toast.fail('该订单已在审核修改中');
        return;
      }

      // if (!this.orderData.modifyRemark) {
      //   this.$toast.fail('请填写修改订单备注');
      //   return;
      // }
      if (!this.orderData.kaArFreight) {
        this.$toast.fail('请填写干线运输应收');
        return;
      }
      this.orderData.kaOrderId = this.orderId;
      this.orderData.isAbnomal = 0;
      this.orderData.userContractId =  this.$router.history.current.query.userContractId
      this.orderData.peoplePrice = (Number(this.orderData.kaArFreight) + Number(this.orderData.kaArSend) + Number(this.orderData.kaArPickUp)).toFixed(2);
      this.orderData.kaArPickUp = this.orderData.kaPickup == 0 ? 0 : this.orderData.kaArPickUp;
      this.orderData.kaArSend = this.orderData.kaDelivery == 0 ? 0 : this.orderData.kaArSend;
      this.orderData.kaArFreight = parseFloat(this.orderData.kaArFreight).toFixed(2);
      this.orderData.carrierFlag = 0; // 确认承运的标识
      this.pushPlatformPc = this.pushPlatform == 1?null:this.pushPlatform;
      orderChange(this.orderData).then(res => {
        if (res.code == 200) {
          this.$router.back();
        }
      });
      //  if(this.orderData.modifyRemark.trim()!="") {
      //     orderChange(this.orderData).then(res => {
      //       if (res.code == 200) {
      //         this.$router.back();
      //       }
      //     });
      //  } else {
      //    this.orderData.modifyRemark = "";
      //    this.$toast.fail("请填写修改订单备注");
      //  }
    }
  },
  watch: {
    'orderData.kaGoodValues': {
      handler: function (newVal) {
        // this.parm.KaGoodValues = newVal;
        let val = newVal;
        this.orderData.kaInsuredPrice =  Math.round((val* 0.003)*100)/100;
        // if (val <= 5000) {
        //   this.orderData.kaInsuredPrice = 0;
        // } else {
        //   this.orderData.kaInsuredPrice = parseFloat(
        //     (val - 5000) * 3 / 1000
        //   ).toFixed(2);
        //   if (this.orderData.kaInsuredPrice == 0.0) {
        //     this.orderData.kaInsuredPrice = 0.01;
        //   }
        // }
      }
    }
  },
  computed: {
    setPageLottery () {
      let select = [];

      if (this.lotteryList && this.orderData.lotteryId) {
        select = this.lotteryList.filter(item => {
          return item.lotteryId == this.orderData.lotteryId;
        });
      }
      if (select && select[0]) {
        return select[0].name;
      } else if (this.orderData.lotteryId) {
        return `满${this.orderData.lotteryMan}减${this.orderData.lotteryJian}`;
      } else if(this.orderData.lotteryId===null) {
        return "不使用任何优惠券";
      } 
      return '不使用任何优惠券';
    },
    //0待提货 1-已提货 2-已承运 3-待承运 4-出运 7-到达站点 10派送中 13-签收(妥投) 14 异常签收  15 拒签 18回执已取

    disabledtihuo () {
      // 如果是(已提货、已承运、待承运\已出运、已到站、已签收)--不能修改是否提货
      return [1, 2, 3, 4, 7, 13, 14, 15, 18].includes(this.orderData.orderStatusBack);
    },
    disabledtihuoprice () {
      // 如果是(已出运、已到站、已签收)--不能修改提货费
      return [4, 7, 13, 14, 15, 18].includes(this.orderData.orderStatusBack);
    },
    disabledganxianprice () {
      // 如果是(已出运、已到站、已签收)--不能修改干线费
      return [4, 7, 13, 14, 15, 18].includes(this.orderData.orderStatusBack);
    },
    couponShow () {
      // 如果是(已出运、已到站、已签收)--不能修改优惠券--已使用优惠券也不能再修改
      //但是 如果是（已出运、已到站） 之前没有选择优惠券  是可以重新选择优惠券
      return [13, 14, 15, 18].includes(this.orderData.orderStatusBack) || [4, 7].includes(this.orderData.orderStatusBack) && this.orderData.lotteryId;
    },
    iskaDelivery () {
      return this.orderData.orderStatusBack < 4;
    }
  }
};
</script>
<style lang="scss">
.changeDetail {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}

.detailInfo {
  // width: 94%;
  padding-top: 56px;
  margin-left: 12px;
  margin-right: 12px;
  text-align: left;
  .assure {
    .van-cell__title {
      flex: 3;
    }
    .custom-assure {
      color: #ff6540;
    }
  }
}

.field {
  margin-top: 10px;
}

.detailBtn {
  width: 100%;
  background: #fff;
  height: 60px;
  position: fixed;
  bottom: 0;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fff;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
      text-align: center;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
      text-align: center;
    }
  }
}
</style>